<!DOCTYPE html>
<!--<!DOCTYPE html>是一个声明，没有什么实际意义-->
<html>
<head>
    <!--第一部分：meta、title-->
    <meta charset="utf-8">
    <title>html笔记1</title>
    <!--title   定义文档的标题，会出现浏览器的标题栏或状态栏上，
        【<title>标签是<head>标签唯一必须要求包含的东西】
        title的增加有利于SEO【搜索引擎】的优化-->
</head>
<body>
    <!--第二部分：1-6级标题、align对齐属性-->
    <!--标题是通过<h1>到<h6>六个标签定义的
        align是标签的属性，把标签的对齐方式
        align="left" 左边
        align="center" 中间
        align="right" 右边
        -->
    <h1 align="center">一级标题</h1>
    <h2 align="left">二级标题</h1>
    <h3 align="right">三级标题</h1>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

    <!--第三部分：br换行标签、hr水平线标签、color属性、width宽度属性、size粗细属性-->
    <p>这是一个段落标签，<br/>可以输出段落文本</p>
    <!--<br/>标签是换行，-->
    <hr color="green" width="300px" size="5px" align="left" />
    <p>这是2号段落标签，<br/>可以输出段落文本</p>
    <!--<p></p>输出文本用的段落标签，代表一段文本，但是文本标签一般表示文本词汇-->
    <br/>
    <!--<hr/>标签是换行，color是颜色，width是宽度，size是高度-->
    <hr color="blue" width="300px" size="20px" />
    
    <!--第四部分：img图像标签、src地址的写法、alt属性、width属性、height属性、title属性-->
    <img src="pic/code_test.jpg" alt="图片数据读取失败，相对路径图片"  width="300px"  height="300px"  title="验证码图片">
    <!--img 
        src是图片地址，可以是本地图片，也可以是网络图片
        图片地址分为：
            相对路径 pic/code_test.jpg 在当前文本html的同一目录下pic文件夹里的code_test.jpg图片
                ../ 上一级目录
                /   下一级目录
                ./  当前目录，一般省略不写
            绝对路径    D:\code_test\Good-boys\Good-boys从磁盘CDEF开始写
            网络图片地址    网络图片的url（比如https://i02piccdn.sogoucdn.com/2a54e1cd91354829）
        alt图片的替代文本，图片读取失败后，出现的内容
        width图片的宽
        height图片的高
        title鼠标放在图片上面给予提示
    -->

    
    <!--第五部分：a超链接标签、href属性-->
    <a href="https://baike.sogou.com/v60559.htm?ch=frombaikevr&fromTitle=%E9%BE%99%E7%8F%A0">
        <img src="https://i02piccdn.sogoucdn.com/2a54e1cd91354829" alt="网络图片" title="网络图片">
    </a>
    <!--超文本链接 <a href="url">需要a有内容，才能跳转，要不然找不到点击的地方</a> -->

    <!--第六部分：文本标签【em,i,b,strong,del,span】-->
    <!--文本标签 -->
    <br/>
    <p>我喜欢吃<em>白菜</em></p>
    <br/>

    <em>【em:定义着重文字，斜体效果】；</em>

    <i>【i:定义斜体字，斜体效果】；</i>

    <b>【b:定义粗体文本,加粗】；</b>

    <strong>【strong:定义加重语气，加粗并加重语气】；</strong>

    <del>【del:定义删除字，中间有一条线】；</del>

    <span>【span:元素没有特殊含义】；</span>

    <br/>
    <br/>
    <!--第七部分：ol标签、li标签、type属性-->
    <!--有序列表，列表可以嵌套-->

    <ol>
        <li>默认1、2、3、4，可称为有序列表</li>
        <li>苹果</li>
        <ol type="a">
            <li>红苹果</li>
            <li>青苹果</li>
        </ol>
        <li>香蕉</li>
        <li>橘子</li>
    </ol>

    <ol type="a">
        <li>a、b、c，可称为有序列表</li>
        <li>苹果</li>
        <li>香蕉</li>
        <li>橘子</li>
    </ol>
    
    <ol type="A">
        <li>A、B、C，可称为有序列表</li>
        <li>苹果</li>
        <li>香蕉</li>
        <li>橘子</li>
    </ol>
    
    <ol type="i">
        <li>i、ii、iii，可称为有序列表</li>
        <li>苹果</li>
        <li>香蕉</li>
        <li>橘子</li>
    </ol>
    
    <ol type="I">
        <li>I、II、III，可称为有序列表</li>
        <li>苹果</li>
        <li>香蕉</li>
        <li>橘子</li>
    </ol>

    <!--无序列表，一个项目的列表,可以嵌套,排名不分先后-->

    <ul type="disc">
        <li>默认实心圆disc，可称为无序列表</li>
        <li>苹果</li>
        <li>香蕉</li>
        <li>橘子</li>
    </ul>

    <ul type="circle">
        <li>空心圆circle，可称为无序列表</li>
        <li>苹果</li>
        <li>香蕉</li>
        <li>橘子</li>
    </ul>

    <ul type="square">
        <li>小方块square，可称为无序列表</li>
        <li>苹果</li>
        <li>香蕉</li>
        <li>橘子</li>
    </ul>

    <ul type="none">
        <li>不显示none，可称为无序列表</li>
        <li>苹果</li>
        <li>香蕉</li>
        <li>橘子</li>
    </ul>

    <br/>

    <!--第八部分：table、tr、td、boder表格的边框、width表格宽度、height表格高度、
    rowspan属性【保留上，删除下面合并的单元格td】、colspan属性【保留左，删除右面合并的单元格td】
    -->

    <!--表格标签，同行登高，同列等宽,boder给[表格]和[单元格][一起加边框线]-->
    <table>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
    </table>
    <table border="1" width="300px" height="300px">
        <tr>
            <td align="left" colspan="2">单元格</td>
            <td align="center">单元格</td>
            <td align="right">单元格</td>
        </tr>
        <tr>
            <td align="left" rowspan="2">单元格</td>
            <td align="left">单元格</td>
            <td align="right" rowspan="2" colspan="2">单元格</td>
        </tr>
        <tr>
            <td align="left">单元格</td>
        </tr>
        <tr>
            <td align="left">单元格</td>
            <td align="left">单元格</td>
            <td align="left">单元格</td>
            <td align="left">单元格</td>
        </tr>
    </table>
    <br/>

    <!--第九部分：form表单标签、action属性、name属性、method属性
    action:服务器地址、name表单名称、
    method数据提交方法【get提交数据url可以看到，post看不到】【get提交少量数据，post提交大量数据】
    -->
    <!-- <form action="url" method="get|post" name="myform"> -->

    <!--表单由【容器和控件】组成，一个表单包括用户填写信息的【输入框、按钮】两样，【输入框、按钮】是控件，表单是【容器】-->
    <!--完整的表单包含三个部分：表单标签form、表单域input输入框、表单按钮input提交按钮-->
    <!--input标签、type属性、value代表按钮的内容-->
    <form method="post">  <!--method="post"或者"get"-->
        用户名：<input type="text" name="user" value="输入用户名" alt="表单域：表单输入框、文本域"><br/>
        密码：<input type="password" name="pwd" alt="表单域：密码框、表单输入框"><br/>
        登录：<input type="submit" value="点击登录" alt="表单按钮：提交按钮"><br/>
    </form>

    <br/>
    
    <!--第十部分：块元素和内联元素-->
    <!--
            块级元素                                    内联元素【行内元素】
        块元素会在页面中独占一行                       只占自身大小，不换行
        可以设置height、width                         没有height、width
        一般块级元素可以包含行内元素和其他块级元素      一般内联元素包含内联元素，但不包含块级元素

        常见块级元素：div、form、h1~h6、hr、p、table、ul等
        常见内联元素【行内元素】：a、b、em、i、span、strong等
        行内块级元素【不换行，能够识别宽和高】：button、img、input
    -->
    <table border="1">
        <tr>
            <td align="center"><strong>块级元素</strong></td>
            <td align="left">块元素会在页面中独占一行</td>
            <td align="left">可以设置height、width</td>
            <td align="left">一般块级元素可以包含行内元素和其他块级元素</td>
        </tr>
        <tr>
            <td align="center"><strong>内联元素【行内元素】</strong></td>
            <td align="left">只占自身大小，不换行</td>
            <td align="left">没有height、width</td>
            <td align="left">一般内联元素包含内联元素，但不包含块级元素</td>
        </tr>
        <tr>
            <td align="center" colspan="2"><strong>常见块级元素</strong></td>
            <td align="left" colspan="2">div、form、h1~h6、hr、p、table、ul等</td>
        </tr>
        <tr>
            <td align="center" colspan="2"><strong>常见内联元素【行内元素】</strong></td>
            <td align="left" colspan="2">a、b、em、i、span、strong等</td>
        </tr>
        <tr>
            <td align="center" colspan="2"><strong>行内块级元素【不换行，能够识别宽和高】</strong></td>
            <td align="left" colspan="2">button、img、input</td>
        </tr>
    </table>
    <br/>
    
    <!--第十一部分：div标签-->
    <!--div标签，容器元素-->
    <div id="header">导航</div>
    <div id="nav">banner</div>
    <div id="article">
        article
        <div id="section">section</div>
    </div>
    <div id="slider">slider</div>
    <div id="footer">footer</div>

    <header>head头部</header>
    <nav>nav导航</nav>
    <article>
        article代表一个独立的、完整的相关内容块，如一篇完整的帖子、博客文章、一个用户评论
        <section>定义文档中的节，比如章节、页眉、页脚、</section>
    </article>
    <aside>aside侧边栏标签</aside>
    <footer>footer底部标签</footer>

    <p>上方都是练习内容</p>
    <strong>HTTP常用的状态码及其含义</strong>
    <table border="1">
        <tr><td>100</td><td>继续。客户端应继续其请求</td></tr>
        <tr><td>101</td><td>创建数据成功、更新数据成功</td></tr>
        <tr><td>重点200</td><td>获取数据成功</td></tr>
        <tr><td>重点201</td><td>创建数据成功、更新数据成功</td></tr>
        <tr><td>重点204</td><td>删除数据成功</td></tr>
        <tr><td>重点206</td><td>服务器成功处理了部分GET请求，响应报文中包含由Content-Range指定范围的实体内容</td></tr>
        <tr><td>重点301</td><td>永久性重定向，会缓冲</td></tr>
        <tr><td>重点302</td><td>临时性重定向，不会缓冲</td></tr>
        <tr><td>重点303</td><td>告知客户端应该用GET方法获取请求的资源</td></tr>
        <tr><td>重点304</td><td>资源未修改，通常用于缓存目的</td></tr>
        <tr><td>重点307</td><td>临时重定向，与302类似，但不会从POST变成GET</td></tr>
        <tr><td>重点400</td><td>客户端请求的语法错误</td></tr>
        <tr><td>重点401</td><td>没有认证成功</td></tr>
        <tr><td>重点403</td><td>认证成功，没有获取到权限</td></tr>
        <tr><td>重点404</td><td>路由错误，请求资源不存在</td></tr>
        <tr><td>405</td><td>客户端请求中的方法被禁止</td></tr>
        <tr><td>406</td><td>请求格式错误</td></tr>
        <tr><td>408</td><td>服务器等待客户端发送的请求时间过长，超时</td></tr>
        <tr><td>重点500</td><td>服务端错误</td></tr>
        <tr><td>501</td><td>服务器不具备完成请求的功能。例如，当服务器无法识别请求方法时，服务器可能会返回此代码</td></tr>
        <tr><td>502</td><td>错误网关</td></tr>
        <tr><td>重点503</td><td>由于超载或系统维护，服务器暂时的无法处理客户端的请求。通常，这只是一种暂时的状态</td></tr>
        <tr><td>504</td><td>服务器作为网关或代理，未及时从上游服务器接收请求</td></tr>
        <tr><td>505</td><td>服务器不支持请求中所使用的 HTTP 协议版本</td></tr>
    </table>
    <strong>端口及对应的服务</strong>
    <table border="1">
        <thead>
            <tr><th>端口</th><th>服务</th></tr>
        </thead>
        <tbody>
            <tr><td>21</td><td>FTP（文件传输协议）</td></tr>
            <tr><td>22</td><td>ssh</td></tr>
            <tr><td>23</td><td>远程登录服务</td></tr>
            <tr><td>25</td><td>SMTP（邮件传输协议）</td></tr>
            <tr><td>53</td><td>DNS域名服务器</td></tr>
            <tr><td>80</td><td>HTTP超文本传输协议</td></tr>
            <tr><td>110</td><td>POP3邮件协议3</td></tr>
            <tr><td>443</td><td>HTTPS</td></tr>
            <tr><td>1080</td><td>sockets</td></tr>
            <tr><td>1521</td><td>Oracle数据库默认端口</td></tr>
            <tr><td>3306</td><td>Mysql服务默认端口</td></tr>
        </tbody>
    </table>
</body>
</html>